import React, { Component } from 'react'

import ListStyleComp from './ListStyleComp.js'

import { connect } from 'react-redux'

import { actionCreators } from './store'

import { bindActionCreators } from 'redux'

import { Link } from  'react-router-dom'

//引入滚动插件
import BScroll from 'better-scroll'

import axios from 'axios'

const qs = require( 'querystring' )

const Item = props => {
    return(
        <li>
            <Link
            to = {{
                pathname: '/details',
                search: `goods_id=${props.goods_id}`,
            }}
            >
                <div className = "imgbox">
                    <img src = { props.pic_url }/>
                </div>
                <div className = "new_price_box">
                    <span> ¥ { props.cprice } </span>
                </div>
                <div className = "old_price_box">
                    <span> { props.title } </span>
                </div>
            </Link>
        </li>

    )
}

// const {obj} = this.props.getlist


class List extends Component {

    constructor ( props ) {
        super ( props )
        this.state = {
            goodlist:[]
        }
    } 
    

    renderItem = () => {
     
        return this.state.goodlist && this.state.goodlist.map((i,index)=> <Item {...i} key={ index++}/>)
      }

    render() {     
       
        return (            
            <ListStyleComp              
            ref = { el => this.ListStyleComp = el }
            >
                <ul>
                    { this.renderItem() }
                </ul>                                   
            </ListStyleComp>
        )
    }

    componentDidMount() {
        const { search } = this.props.location
        const searchObj =qs.parse ( search.slice( 1 ) )
        this.props.get_list(...Object.keys(searchObj),1)
        this.setState({
            goodlist:this.props.getlist
        })

        setTimeout (() => {
            this.bscroll = new BScroll( this.ListStyleComp,{
                click:true,
                pullUpLoad:{
                    threshold:50
                }
            } ) 
            let count = 2
            this.bscroll.on( 'pullingUp' ,() => {//上拉加载事件
                const { search } = this.props.location
                const searchObj =qs.parse ( search.slice( 1 ) )
                const FcateName = [...Object.keys(searchObj)][0]
                this.props.get_list( FcateName,count )
                count ++
                this.bscroll.finishPullUp()//结束上拉动作
            })
        },0)
    }
    componentWillReceiveProps(nextProps) {
        let listgoods = nextProps.getlist.concat(...nextProps.getlist)
        this.setState({
            goodlist:listgoods
        })
        // this.state.goodlist = listgoods.push( ...nextProps.getlist )
        
    }
}


export default connect(
    state=>state.List,
    dispatch=>bindActionCreators( actionCreators , dispatch)
)(List)